<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04.canvasApi圆形绘制</title>
</head>
<body>
<canvas id="canvas">

</canvas>

<script>
  window.onload = function () {
    console.log('onload');
    //获取canvas节点对象
    // var canvasRef = document.querySelector('canvas');

    // canvasRef.width = 600;
    // canvasRef.height = 600;
    // canvasRef.style.border = '1px solid #000'
    // //获取canvas上下文对象
    // var ctx = canvasRef.getContext('2d');
    // //    sAngle 开始弧度  eAngle 结束弧度, 是否逆时针 默认false
    // // ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
    // ctx.moveTo(300,300);
    // // 弧度计算公式  弧度 =  dag * Math.PI / 180
    // ctx.arc(300,300,100,0*Math.PI/180,30*Math.PI/180,false);
    // ctx.closePath();
    // ctx.stroke();

  //  -------------------------------------------
    //案例 根据数据绘画饼状图
    var data = [
      {
        value:"0.4",
        color:"red",
        label:"Java"
      },
      {
        value:"0.2",
        color:"blue",
        label:"C#"
      },
      {
        value:"0.1",
        color:"green",
        label:"Python"
      },
      {
        value:"0.3",
        color:"pink",
        label:"JavaScript"
      }
    ];
    //获取canvas节点对象
    var canvasRef = document.querySelector('canvas');
    //获取canvas上下文
    var ctx = canvasRef.getContext('2d');
    canvasRef.width = 800;
    canvasRef.height = 800;
    canvasRef.style.border = '1px solid #000'

    //data
    //遍历data 开始绘画圆弧
    var tempAngle = -90;//起点弧度开始绘画
    var x = 400;
    var y = 400;
    var r = 200;
    for (let item of data) {
      ctx.beginPath();
      ctx.moveTo(x,y)
      var angel = item.value * 360
      //开始弧度
      var startAngle = tempAngle * Math.PI / 180;
      //结束弧度
      var endAngle = (tempAngle + angel ) * Math.PI / 180
      //填充
      ctx.fillStyle = item.color;
      //闭合路径
      ctx.closePath();
      //描边
      ctx.arc(x,y,r,startAngle,endAngle);
      ctx.fill();
      tempAngle += angel;


    }

  }
</script>
</body>
</html>
